<template>
	<view class="index-mian">
		<view v-if="type != 1" style="padding: 40px;" class="content-center">敬请期待</view>
		<scroll-view v-else class="account-main" scroll-y>
			<view class="ui-flex header">
				<view class="my-flex content-center">
					<view class="text-box">
						<view>总收入</view>
						<view>{{ sumMap['00000000'].inmoney }}</view>
					</view>
				</view>
				<view class="title-circle">
					<text class="title-text" style="top:12px;">净资产</text>
					<text class="title-text" style="bottom: 15px;">{{ moneySum }}</text>
					<view class="color-circle" :style="{ height: colorHeight }"></view>
				</view>
				<view class="my-flex content-center">
					<view class="text-box">
						<view>总支出</view>
						<view>{{ sumMap['00000000'].outmoney }}</view>
					</view>
				</view>
			</view>
			<template v-for="(item, index) in indexData">
				<view :key="'line-' + index" class="ui-flex">
					<view class="my-flex"></view>
					<view class="line"></view>
					<view class="my-flex"></view>
				</view>
				<view :key="'date-' + index" v-if="item.showDate" class="item month ui-flex">
					<view class="my-flex left">{{ item.month }}月</view>
					<view class="view"></view>
					<view class="my-flex right"></view>
				</view>
				<view :key="'date-line' + index" v-if="item.showDate" class="ui-flex">
					<view class="my-flex"></view>
					<view class="line"></view>
					<view class="my-flex"></view>
				</view>
				<view :key="'time-' + index" v-if="item.showTime" class="item day ui-flex">
					<view class="my-flex left content-center">收入 {{ sumMap[item.year + item.month + item.day].inmoney }}</view>
					<view class="view">{{ item.day }}日</view>
					<view class="my-flex right content-center">支出 {{ sumMap[item.year + item.month + item.day].outmoney }}</view>
				</view>
				<view :key="'time-line' + index" v-if="item.showTime" class="ui-flex">
					<view class="my-flex"></view>
					<view class="line"></view>
					<view class="my-flex"></view>
				</view>
				<view :key="'data-' + index" class="item info ui-flex">
					<view class="my-flex left content-center">
						<view v-show="item.type == 0 && !!item.remark">
							<view class="title">{{ item.title }} {{ item.money }}</view>
							<view class="remark">{{ item.remark }}</view>
						</view>
						<view v-show="item.type == 0 && !item.remark">{{ item.title }} {{ item.money }}</view>
					</view>
					<view @longtap="itemTap(item)" class="view content-center" :style="{ background: item.color }"><faicon type="star" color="#fff" size="20"></faicon></view>
					<view class="my-flex right content-center">
						<view v-show="item.type == 1 && !!item.remark">
							<view class="title">{{ item.title }} {{ item.money }}</view>
							<view class="remark">{{ item.remark }}</view>
						</view>
						<view v-show="item.type == 1 && !item.remark">{{ item.title }} {{ item.money }}</view>
					</view>
				</view>
			</template>
			<view class="uni-load-more" v-show="loadingType != 2"><uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more></view>
			<view class="ui-flex" v-show="loadingType == 2">
				<view class="my-flex"></view>
				<view class="line"></view>
				<view class="my-flex"></view>
			</view>
			<view class="item info ui-flex" v-show="loadingType == 2">
				<view class="my-flex"></view>
				<view class="view content-center" style="background-color: rgb(255, 255, 255);"><faicon type="gittip" color="#f66" size="35"></faicon></view>
				<view class="my-flex"></view>
			</view>

			<view v-show="loadingType == 2" class="bottom content-center">
				<view>
					<view>{{ userDate }}</view>
					<view>您开启了记账的旅程</view>
				</view>
			</view>

			<!-- <view class="add-btn content-center" @tap="goUrl('/pages/account-add/account-add')">
				<faicon type="plus" color="#fff" size="22"></faicon>
			</view> -->
		</scroll-view>
		<view class="bar-box ui-flex ">
			<view class="my-flex content-center animated" :class="{ tada: type == 0, active: type == 0 }" @tap="barTap(0)">
				<view>
					<view><faicon type="gittip" color="#f66" size="24"></faicon></view>
					<view class="content-center "><text>提醒</text></view>
				</view>
			</view>
			<view class="my-flex content-center animated" :class="{ tada: type == 1, active: type == 1 }" @tap="barTap(1)">
				<view>
					<view><faicon :type="type != 1 ? 'money' : 'plus-circle'" color="#f66" :size="type != 1 ? '24' : '55'"></faicon></view>
					<view v-show="type != 1" class="content-center"><text>首页</text></view>
				</view>
			</view>
			<view class="my-flex content-center animated" :class="{ tada: type == 2, active: type == 2 }" @tap="barTap(2)">
				<view>
					<view><faicon type="user-circle-o" color="#f66" size="24"></faicon></view>
					<view class="content-center"><text>我的</text></view>
				</view>
			</view>
		</view>
		<view v-show="isModelShow" class="model content-center">
			<view style="padding: 20px;background: #f8f8f8;border-radius: 8px;margin-top: -100px;font-size: 14px;">
				<view style="text-align: center;margin-bottom: 10px;font-size: 17px;color: #333">您没有登录过此应用</view>
				<!--  #ifdef  MP-WEIXIN -->
				<view style="text-align: center;margin-bottom: 20px;font-size: 15px;color: #616361;">请先登录</view>
				<!--  #endif -->
				<!--  #ifndef  MP-WEIXIN -->
				<input type="text" value="" v-model="username" placeholder="用户名" style="padding: 5px;width: 100%;" />
				<input type="text" value="" v-model="password" placeholder="密码" style="padding: 5px;width: 100%;" />
				<!--  #endif -->
				<!--  #ifdef  MP-WEIXIN -->
				<button style="font-size: 15px;" type="primary" open-type="getUserInfo" @getuserinfo="loginWx">用户登录</button>
				<!--  #endif -->
				<!--  #ifndef  MP-WEIXIN -->
				<button style="font-size: 15px;" type="primary" @tap="loginApp">用户登录</button>
				<!--  #endif -->
			</view>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more';
import '@/utils/dateFormat';
import { mapActions, mapGetters } from 'vuex';
export default {
	components: { uniLoadMore },
	data() {
		return {
			type: 1,
			isShowAnime: false,
			colorHeight: '20%',
			pageIndex: 0,
			pageSize: 10,
			loadingType: 1,
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			list: [],
			indexData: [],
			sumMap: {
				'00000000': {
					inmoney: '0',
					outmoney: '0'
				}
			},
			userDate: ''
		};
	},
	async onLoad() {
		this.showLoading('加载中..', true);
		//#ifdef MP-WEIXIN
		if (!this.userInfo) await this.initWxUserData();
		//#endif
		//#ifndef
		if (!this.userInfo) await this.initWebUserData('test','123');
		//#endif
		this.userDate = new Date(this.userInfo.create_date).Format('yyyy年MM月dd日');
		await this.initData();
		this.hideLoading();
	},
	onReachBottom() {
		if (this.loadingType !== 0) {
			return;
		}
		this.loadMore();
	},
	async onPullDownRefresh() {
		await this.initData();
		uni.stopPullDownRefresh();
	},
	methods: {
		...mapActions(['initWxUserData', 'initWebUserData', 'setIsModelShow', 'setInfo']),
		loginWx(res) {
			let _this = this;
			if (res.detail.errMsg != 'getUserInfo:ok') {
				setIsModelShow(true);
			} else {
				console.log(JSON.stringify(res.detail), 'data');
				this.$ajax({
					url: 'https://wx.yttrium2016.cn/wx/addInfo',
					method: 'GET',
					data: {
						openid: _this.openid,
						infoStr: res.detail.rawData
					}
				}).then(res => {
					console.log(res, 'es');
					console.log(_this.userInfo, 'userInfo');
					console.log(_this.wxInfo, 'wxInfo');
					_this.setInfo(res.data);
					_this.$api['fun/addAccountTags']();
				});
			}
		},
		toThousands(num) {
			let temp = Number(num || 0)
				.toFixed(2)
				.split('.');
			let flag = temp.length == 2;
			num = Number(temp[0]);
			let numTemp = (num || 0).toString(),
				result = '';
			while (numTemp.length > 3) {
				result = ',' + numTemp.slice(-3) + result;
				numTemp = numTemp.slice(0, numTemp.length - 3);
			}
			if (numTemp) {
				result = numTemp + result;
			}
			return flag ? result + '.' + temp[1] : result;
		},
		updateIndexData() {
			let result = this.list;
			let timeTemp = '';
			let dataTemp = '';
			result.forEach((item, index) => {
				if (index == 0 || timeTemp != item.year + item.month + item.day) {
					item.showTime = true;
					timeTemp = item.year + item.month + item.day;
				}
				if (index == 0 || dataTemp != item.year + item.month) {
					item.showDate = true;
					dataTemp = item.year + item.month;
				}
				item.money = this.toThousands(item.money);
				item.remark = this.showEmoji(item.remark);
			});
			this.indexData = result;
		},
		itemTap(item) {
			uni.showActionSheet({
				itemList: ['编辑', '删除'],
				success: e => {
					if (e.tapIndex == 0) {
						// 编辑
						uni.navigateTo({
							url: '/pages/account-add/account-add?id=' + item.item_id
						});
					} else if (e.tapIndex == 1) {
						// 删除
						this.msg('点击了删除选项');
					}
				}
			});
		},
		initData() {
			return new Promise((resolve, reject) => {
				this.pageIndex = 0;
				this.list = [];
				this.loadingType = 0;
				this.getSumData().then(() => {
					this.loadingType = 1;
					this.getList().then(() => {
						this.loadingType = this.loadingType == 2 ? 2 : 0;
						resolve();
					});
				});
			});
		},
		loadMore() {
			this.loadingType = 1;
			this.getList().then(() => {
				this.loadingType = this.loadingType == 2 ? 2 : 0;
			});
		},
		getList() {
			return new Promise((resolve, reject) => {
				this.$api['fun/accountListPage']({
					index: this.pageIndex * this.pageSize,
					size: this.pageSize
				}).then(({ data, code, msg }) => {
					if (code == 0) {
						this.list = this.list.concat(data);
						if (data.length < this.pageSize) this.loadingType = 2;
						else this.pageIndex++;
						this.updateIndexData();
					} else {
						this.msg('获取数据出错');
					}
					resolve();
				});
			});
		},
		getSumData() {
			return new Promise((resolve, reject) => {
				this.$api['fun/accountIndexSum']().then(({ data, code, msg }) => {
					if (code == 0) {
						data.forEach((item, index) => {
							this.sumMap[item.times] = item;
						});
						if (!this.sumMap['00000000'].inmoney) this.sumMap['00000000'].inmoney = '0.00';
						if (!this.sumMap['00000000'].outmoney) this.sumMap['00000000'].outmoney = '0.00';
					} else {
						this.msg('获取数据出错');
					}
					resolve();
				});
			});
		},
		barTap(index) {
			if (index == this.type && index == 1) {
				this.goUrl('/pages/account-add/account-add');
				return;
			}
			this.type = index;
			if (index == 2) {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#ff6364',
					animation: {
						duration: 100,
						timingFunc: 'easeIn'
					}
				});
			} else {
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff',
					animation: {
						duration: 100,
						timingFunc: 'easeIn'
					}
				});
			}
		},
		goUrl: function(url) {
			uni.navigateTo({
				url: url
			});
		}
	},
	computed: {
		...mapGetters(['openid', 'isModelShow', 'wxInfo', 'userInfo', 'token']),
		moneySum() {
			return (Number(this.sumMap['00000000'].inmoney.replace(/,/g, '')) - Number(this.sumMap['00000000'].outmoney.replace(/,/g, ''))).toFixed(2);
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.index-mian {
	padding-bottom: 60px;
}
.bar-box {
	background: #f8f8f8;
	height: 58px;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	color: #999;
	.fa {
		color: #999 !important;
	}
	.active {
		color: #007aff;
		.fa {
			color: #007aff !important;
		}
	}
}
.model {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 9999;
	background: rgba($color: #000000, $alpha: 0.3);
}
.account-main {
	width: 100%;
	background: #fff;
	.header {
		text-align: center;
		padding-top: 10px;
		.title-circle {
			width: 60px;
			height: 60px;
			background: #d1cfcf;
			border-radius: 50%;
			display: inline-block;
			position: relative;
			overflow: hidden;
			z-index: 5;
			.color-circle {
				background: #4f77e6;
				width: 60px;
				height: 60px;
				position: absolute;
				bottom: 0;
				z-index: 4;
				left: 0;
			}
			.title-text {
				position: absolute;
				left: 0;
				right: 0;
				z-index: 5;
				color: #fff;
			}
		}
		.text-box {
			font-size: 15px;
			color: #636163;
			> view:first-child {
				margin-bottom: 3px;
			}
		}
	}
	.line {
		height: 36px;
		margin: 2px 0;
		width: 1px;
		background: #d6d3d6;
	}
	.item {
		font-size: 15px;
		.left {
			text-align: right;
			margin-right: 12px;
			color: #636163;
			justify-content: flex-end;
		}
		.right {
			text-align: left;
			margin-left: 12px;
			color: #636163;
			justify-content: flex-start;
		}
		&.month {
			height: 9px;
			.view {
				padding: 3px;
				border: 1px solid #d6d3d6;
				border-radius: 50%;
				width: 1px;
				height: 1px;
				background-color: #efefef;
			}
			.left {
				margin-top: -4.3px;
				font-size: 13px;
			}
		}

		&.day {
			height: 33px;
			.view {
				border: 1px solid #d6d3d6;
				border-radius: 50%;
				width: 31px;
				height: 31px;
				font-size: 12px;
				text-align: center;
				line-height: 31px;
				background-color: #d6d3d6;
				color: #fff;
			}
		}
		&.info {
			height: 33px;
			position: relative;
			.view {
				// border: 1px solid #d6d3d6;
				border-radius: 50%;
				width: 33px;
				height: 33px;
				font-size: 12px;
				text-align: center;
				line-height: 31px;
				background-color: #f66;
				color: #fff;
			}
			.btn-left {
				position: absolute;
				left: 15px;
				top: 0;
				border-radius: 50%;
				width: 33px;
				height: 33px;
				font-size: 12px;
				text-align: center;
				line-height: 31px;
				background-color: #f66;
				color: #fff;
			}
			.btn-right {
				position: absolute;
				right: 15px;
				top: 0;
				border-radius: 50%;
				width: 33px;
				height: 33px;
				font-size: 12px;
				text-align: center;
				line-height: 31px;
				background-color: #66f;
				color: #fff;
			}
			.title {
			}
			.remark {
				font-size: 12px;
			}
		}
	}
	.bottom {
		padding: 30px 0;
		font-size: 15px;
		view {
			text-align: center;
		}
	}
	.uni-load-more {
		padding: 10px;
	}
	.add-btn {
		border-radius: 50%;
		width: 60px;
		height: 60px;
		background: #4f77e6;
		position: fixed;
		right: 25px;
		bottom: 25px;
		&:active {
			background: rgba(0, 0, 0, 0.3);
		}
	}
}
</style>
